<template>
	<gracePage :customHeader="false" >
		<view slot="gBody" style="background: #FFFFFF;" :style="{height: height}">
			<view class="grace-columns" style="background-image: url(../../static/register.png); background-size: contain; width: 750rpx;height: 800rpx;">
				<view style="background-size: contain;width: 180rpx;height: 180rpx;margin:0 auto; position: relative;top: 125rpx;"></view>
				<view style="margin: 0 auto;position: relative;top: 420rpx;">
					<view>
						<view class="grace-rows" style="margin: 0 auto;">
							<image src="../../static/yonghu.png" style="width: 36rpx;height: 36rpx;"></image>
							<input style="margin-left: 30rpx; width: 530rpx;" v-model="phone" placeholder="请输入账号"/>
						</view>
						<view style="margin-top: 15rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
					</view>
					<view style="margin-top: 60rpx;">
						<view class="grace-rows" style="margin: 0 auto;">
							<image src="../../static/mima.png" style="width: 36rpx;height: 36rpx;"></image>
							<input password="true" v-model="pwd" style="margin-left: 30rpx; width: 530rpx" placeholder="请输入密码"/>
						</view>
						<view style="margin-top: 15rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
					</view>
				</view>
			</view>
			<view style="margin-top: 80rpx;">
				<button @tap="sub" type="primary" :style="{background:button_color}" class="button_color"><text style="font-size:28rpx;font-weight:300;color:rgba(255,255,255,1);line-height:80rpx;">登陆</text></button>
				<view class="grace-space-between" style="padding: 0 70rpx;margin-top: 40rpx;">
					<view @tap="Forget">
						<text style="font-size:30rpx;font-weight:300;color:rgba(54, 130, 255, 1);">忘记密码</text>
					</view>
					<!-- <view @tap="fahui">
						<text style="font-size:30rpx;font-weight:300;color:rgba(54, 130, 255, 1);">返回首页</text>
					</view> -->
					<view @tap="register" >
						<text style="font-size:30rpx;font-weight:300;color:rgba(54, 130, 255, 1);font-weight: bold;">立即注册</text>
					</view>
				</view>
			</view>
			<ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				phone:'',
				pwd:'',
				height:'',
				loadings:false
			}
		},
		  // onBackPress(options) {
		  //       console.log('from:' + options.from)
		  //   },
		// onBackPress() {
		// 	// console.log(event);
		// 	// var vm=this;
		// 	// vm.toTab('/pages/index/index');
		// 	uni.switchTab({
		// 		url: '/pages/index/index'
		// 	})
		// 	// return true
		//  }, 
		onLoad:function(){
			this.height=this.sys.windowHeight+'px'
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods:{
			// 登录按钮事件
			sub(){
				var vm=this;
				var data = {
					user:this.phone,
					password:this.pwd,
				}
				if (this.phone.length>0 && this.pwd.length>0){
					vm.loadings = true
					this.myPost('api/userapi/sign_in',data,
					function(res){
						vm.loadings = false
						console.log(res);
						if(res.code == 200){
							var data=res.data;
							uni.setStorageSync('storage_key',data);
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							uni.switchTab({
							    url: '/pages/personal_center/my_beha'
							});
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
					)
					
				}else{
					uni.showToast({
						title: '请输入账号或密码',
						icon: 'none'
					})
				}
			},
			// 忘记密码跳转页面事件
			Forget(){
				uni.navigateTo({
				    url: '/pages/user/forget_password'
				});
			},
			// 返回首页跳转页面事件
			fahui(){
				uni.switchTab({
						url: '/pages/index/index'
					})
			},
			// 立即注册跳转页面事件
			register(){
				uni.navigateTo({
				    url: '/pages/user/register'
				});
			}
				
		},
		components:{
			gracePage
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.button_color{
		width:607rpx;height:88rpx;background:#3187D5;border-radius:44rpx;
	}
</style>
